<task-main>
    <div class="list-page">
        <div class="topbar">
            <button class="btn btn-primary" onclick="{onCreate}">
                <i class="fa fa-plus"></i> 添加节点
            </button>
        </div>
        <div class="tablepanel">
            <task-table ref="table"></task-table>
        </div>
    </div>
    <script>
        var tag = this;

        onCreate()
        {
            var layerid = layer.open({
                type: 1,
                title: '添加节点',
                shadeClose: true,
                shade: 0.8,
                area: ['1000px', '400px'],
                content: '<div class="layer-container"><task-create></task-create></div>',
                success: function () {
                    var taskcreateTag = riot.mount('task-create')[0];
                    console.log("taskcreateTag", taskcreateTag);
                    taskcreateTag.on("aftersave", function (data) {
                        console.log("aftersave");
                        layer.close(layerid);
                        tag.refs.table.afterCreate(data);
                    });
                }
            });
        }

    </script>
</task-main>

<task-table>
    <table class="table table-bordered table-striped table-vcenter table-hover">
        <tr>
            <th style="min-width:100px">名称</th>
            <th style="width:200px">备注</th>
            <th>操作</th>
        </tr>
        <tr each="{this.data}" show="{tree_visible}">
            <td><span style="margin-right:{tree_level * 1}rem"></span><a onclick="{onNodeClick.bind(this, id)}"><i
                    class="layui-icon layui-tree-leaf" if="{childCount == 0}"></i><i
                    class="fa fa-plus-square text-primary" if="{ ! tree_expanded && childCount > 0}"></i><i
                    class="fa fa-minus-square text-primary" if="{tree_expanded && childCount > 0}"></i> {name}</a></td>
            <td>
                <pre class="break-text">{remark}</pre>
            </td>
            <td>
                <button class="btn btn-primary btn-sm" onclick={this.createSubTaskRow.bind(this,id)}><i
                        class="fa fa-plus"></i> 添加子节点
                </button>
                <button class="btn btn-danger btn-sm" onclick={this.deleteRow.bind(this,id,name)}><i
                        class="fa fa-remove"></i> 删除
                </button>
            </td>
        </tr>
        <tr if={this.total== 0}>
            <td colspan="100">没有数据</td>
        </tr>
    </table>
    <paging ref="paging" total={this.total}></paging>
    <script>

        var tag = this;

        // 查询条件
        tag.queryCondition = {};
        // 列表数据
        tag.data = [];
        // 当前页，索引从1开始
        tag.currentPage = 1;
        // 所有记录数
        tag.total = 0;

        tag.loadData = function () {
            tag.queryCondition.start = (this.currentPage - 1) * ss.PageSize;
            tag.queryCondition.length = ss.PageSize;

            task_api.queryPaging(tag.queryCondition).done(function (data) {
                console.log("data=", data);

                tag.total = data.total;
                tag.data = data.data;

                arraytree.calcNodeVisible_ChildCount_Level(tag.data);
                tag.update();
            });
        };

        tag.resetSearch = function () {
            this.queryCondition = {};
            this.loadData();
        };

        tag.search = function (queryCondition) {
            this.queryCondition = queryCondition;
            this.loadData();
        };

        tag.on('mount', function () {
            this.refs.paging.on('change', function (e) {
                console.log("page changed " + this.getPage());
                tag.currentPage = this.getPage();
                tag.loadData();
            })
        });

        tag.deleteRow = function (id, name) {
            ss.confirm("确定要删除" + ss.text_highlight(name) +
                "吗?", function () {
                ss.showGlobalWaiting();
                task_api.delete0(id).done(function () {
                    console.log("after delete");
                    ss.hideGlobalWaiting();
                    tag.afterDelete(id);
                })
            })
        };

        tag.createSubTaskRow = function (id) {
            var layerid = layer.open({
                type: 1,
                title: '添加子节点',
                shadeClose: true,
                shade: 0.8,
                area: ['1000px', '400px'],
                content: '<div class="layer-container"><task-create></task-create></div>',
                success: function () {
                    var taskcreateTag = riot.mount('task-create', {
                        parentid: id
                    })[0];
                    console.log("taskcreateTag", taskcreateTag);
                    taskcreateTag.on("aftersave", function (data) {
                        console.log("aftersave");
                        layer.close(layerid);
                        tag.afterCreateSub(data);
                    });
                }
            });
        };

        tag.afterDelete = function (id) {
            arraytree.deleteNode(tag.data, id);
            arraytree.calcNodeVisible_ChildCount_Level(tag.data);
            tag.total = arraytree.calcTopNodes(tag.data);
            tag.update();
        };

        tag.afterCreate = function (data) {
            console.log("afterCreate, data=", data);
            arraytree.findAndInsertTreeData(tag.data, data);
            arraytree.calcNodeVisible_ChildCount_Level(tag.data);
            tag.total = arraytree.calcTopNodes(tag.data);
            tag.update();
        };

        tag.afterUpdate = function (data) {
            console.log("afterUpdate, data=", data);
            arraytree.updateNode(tag.data, data);
            tag.update();
        };

        tag.afterCreateSub = function (nodedata) {
            var parentnode = arraytree.findNode(tag.data, nodedata.parentid);
            if (parentnode.tree_loaded) {
                arraytree.findAndInsertTreeData(tag.data, nodedata);
                parentnode.tree_expanded = true;
                arraytree.calcNodeVisible_ChildCount_Level(tag.data);
                tag.update();
            } else {
                task_api.findChildren(parentnode.id).done(function (children) {
                    parentnode.tree_loaded = true;
                    arraytree.addChildren(tag.data, parentnode.id, children);
                    parentnode.tree_expanded = true;
                    arraytree.calcNodeVisible_ChildCount_Level(tag.data);
                    tag.update();
                });
            }
        };

        onNodeClick(id)
        {
            var rowdata = arraytree.findNode(tag.data, id);
            console.log("rowdata", rowdata);

            if (rowdata.tree_loaded) {
                rowdata.tree_expanded = !rowdata.tree_expanded;
                arraytree.calcNodeVisible_ChildCount_Level(tag.data);
                tag.update();
            } else {
                task_api.findChildren(rowdata.id).done(function (children) {
                    rowdata.tree_loaded = true;
                    arraytree.addChildren(tag.data, rowdata.id, children);
                    rowdata.tree_expanded = !rowdata.tree_expanded;
                    arraytree.calcNodeVisible_ChildCount_Level(tag.data);
                    tag.update();
                });
            }
        }

        tag.loadData();

    </script>
</task-table>

<task-create>
    <form ref="form" class="form-horizontal" onsubmit="{savedata}">

        <div class="form-group row" show="{!!parenttask.name}">
            <label class="col-sm-3 text-right">父节点</label>
            <div class="col-sm-4">
                {parenttask.name}
            </div>
        </div>
        <div class="form-group row">
            <label for="name" class="col-sm-3 text-right"><span class="required">*</span>名称</label>
            <div class="col-sm-4">
                <input class="form-control" id="name" name="name"/>
            </div>
        </div>
        <div class="form-group row">
            <label for="remark" class="col-sm-3 text-right">备注</label>
            <div class="col-sm-4">
                <input type="textarea" class="form-control" id="remark" name="remark" />
            </div>
        </div>
        <div class="form-group row">
            <div class="offset-3 col-sm-7">
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </div>
    </form>

    <script>

        var tag = this;

        tag.parenttask = {
            name: "..."
        };

        tag.initdata = function () {
            console.log("opts", tag.opts);
            var parentid = tag.opts.parentid;

            if (ss.isUndefinedOrNull(parentid)) {
                tag.parenttask.name = "";
                tag.update();
            } else {
                task_api.get(parentid).done(function (data) {
                    tag.parenttask = data;
                    tag.update();
                });
            }
        };

        savedata(e)
        {
            e.preventDefault();

            var data = {
                parentid : tag.opts.parentid
            };

            $(tag.refs.form).find("input").each(function(i, input){
                var name = $(input).attr("name");
                var val = $(input).val();
                data[name] = val;
            });

            task_api.create(data).done(function (data) {
                tag.trigger("aftersave", data);
            });
        }

        tag.initdata();
    </script>
</task-create>
